<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            margin:10px 0;
        }
        button{
            background: none;
            border: none;
            text-decoration: underline;
            color: #6a09ee;
        }
    </style>
</head>

<body>
    <ul type="circle">
        <li>苦瓜</li>
        <li>白菜</li>
        <li>青菜</li>
        <li>萝卜</li>
        <li>西瓜</li>
        <li>青椒</li>
    </ul>
    <script>
        var ul = document.querySelector('ul');
        // 找到所有的li
        var allLi = document.querySelectorAll('li');
        // 循环 操作每一个li
        for (var i = 0; i < allLi.length; i++) {
            deleteLi(i); // 操作函数
        }
        function deleteLi(index){
            var li = allLi[index]; // 获取到li
            // 创建按钮
            var btn = document.createElement('button');
            btn.innerText = '删除';
            // 绑定单击事件
            btn.onclick = function(){ // 删除
                ul.removeChild(li);
            };
            li.appendChild(btn);
        }
    </script>
</body>

</html>